import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import TableControls from '#cpt/temp/TableControls'
import Confirm from '#cpt/temp/Confirm'
// ===================================================================== Declare
const { $fn, $Lazy } = window
// ===================================================================== private component
const Page 			= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache 		= $Lazy.file(()=>import('#private/cache-api'))
const UseLogModal 	= $Lazy.state(()=>import('./_cpt/useLog-modal'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		// 搜索表单列表
		forms : [
			{ label: '场景名称',		name: 'authorzation_scene', type:'select',	idStr: 'scene_name',	nameStr: 'scene_name', loading:true },
			{ label: '签名所属人',	name: 'authorzation_owner',	type:'select',	idStr: 'uuid',	nameStr: 'real_name', loading:true },
			{ label: '授权时间',		names: ['start_at','end_at'],	type:'date-range', },
		]
	}
	model = {}
	
	query = { type: 1 }
	
	componentDidMount(){
		this.getSelect()
		this.fetch()
	}

	// 获取下拉数据
	getSelect = () => {
		const { forms } = this.state
		$cache.then( async f => {
			const { authorzation_scene, authorzation_signature } = await f.getCache( { api:'conf-authorzation/getShareEmp', refresh:true } )
			// 使用场景
			$fn.setRow( forms, 'authorzation_scene', authorzation_scene)
			// 签名所属人
			$fn.setRow( forms, 'authorzation_owner', authorzation_signature)
			// 
			this.setState({ forms })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'conf-authorzation/index')
	
	// 表单
	cols = [
		{ title: '签名所属人', 	dataIndex: 'authorzation_owner_name',	width:100},
		{ title: '授权场景', 	dataIndex: 'authorzation_scene_name',	width:100},
		{ title: '授权时间', 	dataIndex: 'authorzation_start_time',	width:200 },
		{ title: '过期时间', 	dataIndex: 'authorzation_end_time',		width:200, },
		// { title: '最近使用时间', 	dataIndex: 'created_at',				width:200 },
		TableControls.controls.call(this,{ width: 120 }),
	]
	

	// 表格操作按钮
	table_controls = (text, rows) => [
		this.onDel(rows.uuid),
		TableControls.click.call(this, '查看使用记录', ()=> this.useLogModalRef.open(rows), { ghost:true } ),
	]
	
	// 取消授权
	onDel = uuid => Confirm.call(this, '取消授权', 'conf-authorzation/del', { param: [uuid], isKeys: !uuid, idStr: 'uuids' })
	
	render(){
		return (
			<>
				<Page title='我的签名管理'>
					{/* 搜索 */}
					{ SearchForm.call(this) }
					{/* 表格 */}
					{ Table.call(this) }
				</Page>
				{/* 使用记录弹窗 */}
				<UseLogModal onRef={ref=>this.useLogModalRef = ref} type={1} />
			</>
		)
	}
}

export default Index